<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>指标抓取插件</title>
  <link rel="stylesheet" href="styles/popup.css">
</head>
<body>
  <div class="header">
    <div id="title">指标拾取器</div>
    <div style="display: flex; align-items: center;">
      <div class="theme-icon-group">
        <div class="theme-icon light">
          <!-- 太阳SVG -->
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="5" fill="currentColor"/>
            <path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </div>
        <div class="theme-icon dark">
          <!-- 月亮SVG -->
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" fill="currentColor"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- 可滚动的内容区域 -->
    <div class="scrollable-content">
      <div class="data-preview" id="dataPreview">
        <div id="dataList"></div>
      </div>
    </div>

    <!-- 固定底部区域 -->
    <div class="fixed-footer">
      <span class="version-info">版本号：V1.1.3</span>
      <div class="button-group">
        <button id="collectAll" disabled>采集数据</button>
        <button id="uploadData" disabled>上传数据</button>
        <button id="exportData" disabled>导出数据</button>
      </div>
    </div>
  </div>
  <div class="template-row">
    <span class="template-label">选择模板</span>
    <select id="templateSelect"></select>
  </div>
  <div class="merchant-row">
    <div id="merchantInfo" class="merchant-info"></div>
  </div>
  <div class="period-row">
    <span class="period-label">筛选周期</span>
    <select id="periodSelect">
      <option value="today">今日</option>
      <option value="yesterday">昨日</option>
      <option value="last7days">近7天</option>
      <option value="last30days">近30天</option>
      <option value="custom">自定义</option>
    </select>
  </div>
  <div class="scope-container">
    <div class="scope-label">抓取范围：</div>
    <div class="scope-flex">
      <div class="scope-options">
        <label>
          <input type="radio" name="scope" value="current" checked> 当前页
        </label>
        <label>
          <input type="radio" name="scope" value="all"> 全部
        </label>
      </div>
      <div class="divider">|</div>
    </div>
    <div class="auto-export-container">
      <label>
        <input type="checkbox" id="autoExport"> 自动导出
      </label>
    </div>
  </div>
  <div class="btn-row">
    <button id="extractBtn">开始抓取</button>
    <button id="stopBtn" style="display: none;">停止抓取</button>
    <button id="exportBtn">导出JSON</button>
  </div>
  <div class="result-container">
    <div id="result">请先选择模板并点击"开始抓取"</div>
    <div class="button-group" style="display: none;">
      <button id="copyBtn" class="copy-btn">复制</button>
      <button id="clearBtn" class="clear-btn" title="清除">
        <svg class="clear-icon" viewBox="0 0 24 24">
          <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
        </svg>
      </button>
    </div>
  </div>
  <div class="version-info">v1.1.3</div>
  <script src="popup.js" type="module"></script>
</body>
</html>
